<template>
    <section>
        <span class="primary my-2 w-full text-center" style="font-size: 14px; display: inline-block">
            <span class="danger">*</span>
            该界面功能：对山东境内各地（含未知地市）被攻击数据库进行统计，统计被攻击总次数，攻击成功的次数，攻击失败的次数，爆破成功的次数，爆破失败的次数。
        </span>
        <el-form v-model="query" :inline="true" class="mx-2" size="small">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="日期：" label-width="80px">
                        <el-date-picker
                                v-model="query.dateRange"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button type="primary" @click="search" icon="el-icon-search">搜 索</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="data"
                   :page.sync="page"
                   :before-open="beforeOpen"
                   v-model="form"
                   ref="crud"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                   @sort-change="sortChange"
                   @on-load="onLoad">
            <template slot="menu" slot-scope="{row,type,size}">
                <el-button :size="size" :type="type" icon="el-icon-view" @click="detail(row)">
                    被攻击详情
                </el-button>
            </template>
            <template slot="menuLeft">
                <excel-export v-bind="excelExportProps">
                </excel-export>
            </template>
        </avue-crud>
        <el-drawer
                size="40%"
                title="详情"
                append-to-body
                :visible.sync="drawer"
                direction="rtl"
        >
            <el-scrollbar>
                <template v-if="detailList.length > 0">
                    <el-card shadow="hover" v-for="item in detailList" :key="item.id" class="px-4 my-2 mx-8">
                        <p>
                            <span class="px-2">日期：{{item.date}}</span>
                            <span class="px-2">被攻击城市：<el-tag size="small">{{item.attackedCity}}</el-tag></span>
                            <span class="px-2">发起攻击国家：<el-tag type="danger" size="small">{{item.attackCountry=='中国'?'境内':item.attackCountry}}</el-tag></span>
                        </p>
                        <p>
                            <span class="px-2">被攻击次数：<span class="danger" style="font-weight: bold">{{item.attackedTotalCount}}</span></span>
                            <span class="px-2">成功次数：<span class="success" style="font-weight: bold">{{item.attackedSuccessCount}}</span></span>
                            <span class="px-2">失败次数：<span class="danger" style="font-weight: bold">{{item.attackedFailureCount}}</span></span>
                        </p>
                    </el-card>
                </template>
            </el-scrollbar>
        </el-drawer>
    </section>
</template>

<script>

  import {getList, getDetail} from "@/youan/api/sd_city_db_attacked_analysis/sdCityDbAttackedAnalysis";
  import {toLine} from "../../../util/common";
  import excelExport from "@/youan/components/excel/excel-export";

  export default {
    name: "sdCityDbAttacked",
    data() {
      return {
        form: {},
        query: {
          dateRange: ""
        },
        excelExportProps: {
          exportUrl: "/api/sd_city_db_attacked_analysis/exportExcel",
          prepareQuery: this.prepareQuery,
          loadingText: "",
          excelName: "山东各地区被攻击次数统计表"
        },
        loading: true,
        drawer: false,
        page: {
          pageSize: 50,
          currentPage: 1,
          total: 0
        },
        option: {
          height:'auto',
          calcHeight: 130,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: false,
          editBtn: false,
          delBtn: false,
          addBtn: false,
          dialogClickModal: false,
          column: [
            {
              label: "",
              prop: "id",
              hide: true
            },
            {
              label: "山东城市",
              prop: "attackedCity",
            },
            {
              label: "被攻击总数",
              prop: "attackedTotalCount",
              sortable: "custom"
            },
            {
              label: "被攻击成功总数",
              prop: "attackedSuccessCount",
              sortable: "custom"
            },
            {
              label: "被攻击失败总数",
              prop: "attackedFailureCount",
              sortable: "custom"
            },
            {
              label: "爆破成功总数",
              prop: "blastSuccessCount",
              sortable: "custom"
            },
            {
              label: "爆破失败总数",
              prop: "blastFailureCount",
              sortable: "custom"
            },
          ]
        },
        data: [],
        detailList: []
      };
    },
    methods: {
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        this.loading = true;
        if(this.query.dateRange) {
          params.startTime = this.query.dateRange[0];
          params.endTime = this.query.dateRange[1]
        }
        getList(page.currentPage, page.pageSize, params).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
        });
      },
      sortChange(val) {
        let params = {};
        if(val.order == "ascending") {
          params.ascs = toLine(val.prop)
        }else if(val.order == "descending") {
          params.descs = toLine(val.prop)
        }
        this.onLoad(this.page, params)
      },
      search() {
        this.onLoad(this.page)
      },
      async detail(row) {
        const result = await getDetail(row.attackedCity);
        this.drawer = true;
        if(result.data.success) {
          this.detailList = result.data.data;
        }
      },
      prepareQuery() {
        let query = {};
        if(this.query.dateRange) {
          query.startTime = this.query.dateRange[0];
          query.endTime = this.query.dateRange[1]
        }
        return query
      }
    },
    activated() {
      this.$nextTick(() => {
        if (this.$refs.crud.$refs.table) {
          this.$refs.crud.$refs.table.doLayout();
        }
      })
    },
    components: {
      excelExport
    }
  }
</script>

<style scoped>
    .el-card:last-child {
        margin-bottom: 100px !important;
    }
</style>